<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家管理系统</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        .menu-item a {
    color: inherit; /* 继承父元素颜色 */
    text-decoration: none; /* 去除下划线 */
    display: block; /* 使整个区域可点击 */
    width: 100%;
    height: 100%;
}
        /* 添加悬停状态 */
.menu-item a:hover {
    color: inherit;
}

        /* 整体布局 */
        .merchant-admin {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏 */
        .sidebar {
            width: 240px;
            background: #2c3e50;
            padding: 1rem;
            color: white;
            position: fixed;
            height: 100vh;
        }

        .sidebar-menu {
            list-style: none;
            margin-top: 2rem;
        }

        .menu-item {
            padding: 1rem;
            margin: 0.5rem 0;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .menu-item:hover {
            background: #34495e;
        }

        .menu-item.active {
            background: #3498db;
        }

        /* 主内容区 */
        .main-content {
            margin-left: 240px;
            padding: 2rem;
            flex: 1;
            background: #f5f6fa;
        }

        /* 数据概览 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        /* 产品表格 */
        .product-table {
            width: 100%;
            background: white;
            border-collapse: collapse;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .product-table th,
        .product-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .product-table th {
            background: #3498db;
            color: white;
        }

        .status-tag {
            padding: 0.3rem 0.5rem;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        .status-on {
            background: #27ae60;
            color: white;
        }

        .status-off {
            background: #95a5a6;
            color: white;
        }

        .status-warning {
            background: #f1c40f;
            color: white;
        }

        /* 操作按钮 */
        .table-action {
            padding: 0.3rem 0.5rem;
            margin: 0 0.2rem;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .edit-btn {
            background: #3498db;
            color: white;
        }

        .delete-btn {
            background: #e74c3c;
            color: white;
        }

        /* 搜索栏 */
        .search-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            gap: 1rem;
        }

        #searchInput {
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 300px;
        }

        /* 模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }

        .modal-content {
            background: white;
            width: 500px;
            margin: 2rem auto;
            padding: 2rem;
            border-radius: 6px;
        }

        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                position: static;
                height: auto;
            }

            .main-content {
                margin-left: 0;
            }

            .search-header {
                flex-direction: column;
            }

            #searchInput {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="merchant-admin">
        <!-- 侧边栏 -->
        <nav class="sidebar">
            <h2>商家管理中心</h2>
            <ul class="sidebar-menu">
                <li class="menu-item active">商品管理</li>
                <li class="menu-item">订单管理</li>
                <li class="menu-item">数据统计</li>
                <li class="menu-item">店铺设置</li>
                <li class="menu-item">
                    <a href="{% url 'SalesApp:index' %}">点击返回页面</a>
                </li>
            </ul>
        </nav>

        <!-- 主内容 -->
        <main class="main-content">
            <!-- 数据概览 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <h3>在售商品</h3>
                    <p class="stat-value">28</p>
                </div>
                <div class="stat-card">
                    <h3>今日订单</h3>
                    <p class="stat-value">56</p>
                </div>
                <div class="stat-card">
                    <h3>待处理订单</h3>
                    <p class="stat-value">12</p>
                </div>
            </div>

            <!-- 搜索和操作 -->
            <div class="search-header">
                <input type="text" id="searchInput" placeholder="搜索商品名称...">
                <button class="edit-btn" onclick="showModal()">+ 添加商品</button>
            </div>

            <!-- 商品表格 -->
            <table class="product-table">
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>分类</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="productTable">
                    <!-- 数据通过JS生成 -->
                </tbody>
            </table>

            <!-- 添加商品模态框 -->
            <div id="addModal" class="modal">
                <div class="modal-content">
                    <h2>添加新商品</h2>
                    <form id="productForm">
                        <div class="form-group">
                            <label>商品名称</label>
                            <input type="text" class="form-input" required>
                        </div>
                        <div class="form-group">
                            <label>商品分类</label>
                            <select class="form-input" required>
                                <option value="vegetables">蔬菜</option>
                                <option value="fruits">水果</option>
                                <option value="grains">谷物</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>价格</label>
                            <input type="number" class="form-input" step="0.01" required>
                        </div>
                        <div class="form-group">
                            <label>库存数量</label>
                            <input type="number" class="form-input" required>
                        </div>
                        <div class="button-group">
                            <button type="button" class="secondary-btn" onclick="hideModal()">取消</button>
                            <button type="submit" class="primary-btn">保存商品</button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 模拟数据
        let products = [
            {
                id: 1,
                name: '有机西红柿',
                category: '蔬菜',
                price: 12.8,
                stock: 50,
                status: 'on'
            },
            {
                id: 2,
                name: '红富士苹果',
                category: '水果',
                price: 18.5,
                stock: 5,
                status: 'warning'
            },
            {
                id: 3,
                name: '东北大米',
                category: '谷物',
                price: 6.5,
                stock: 0,
                status: 'off'
            }
        ];

        // 渲染商品表格
        function renderProducts() {
            const tbody = document.getElementById('productTable');
            tbody.innerHTML = products.map(product => `
                <tr>
                    <td>${product.name}</td>
                    <td>${product.category}</td>
                    <td>¥${product.price.toFixed(2)}</td>
                    <td>${product.stock}</td>
                    <td>
                        <span class="status-tag ${getStatusClass(product)}">
                            ${getStatusText(product)}
                        </span>
                    </td>
                    <td>
                        <button class="table-action edit-btn" onclick="editProduct(${product.id})">编辑</button>
                        <button class="table-action delete-btn" onclick="deleteProduct(${product.id})">删除</button>
                    </td>
                </tr>
            `).join('');
        }

        function getStatusClass(product) {
            if(product.stock <= 0) return 'status-off';
            if(product.stock <= 10) return 'status-warning';
            return 'status-on';
        }

        function getStatusText(product) {
            if(product.stock <= 0) return '已下架';
            if(product.stock <= 10) return '库存紧张';
            return '销售中';
        }

        // 模态框控制
        function showModal() {
            document.getElementById('addModal').style.display = 'block';
        }

        function hideModal() {
            document.getElementById('addModal').style.display = 'none';
        }

        // 表单提交
        document.getElementById('productForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // 模拟添加商品
            const newProduct = {
                id: products.length + 1,
                name: this[0].value,
                category: this[1].value,
                price: parseFloat(this[2].value),
                stock: parseInt(this[3].value),
                status: 'on'
            };
            products.push(newProduct);
            renderProducts();
            hideModal();
            this.reset();
        });

        // 初始化渲染
        renderProducts();

        // 搜索功能
        document.getElementById('searchInput').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const filtered = products.filter(p =>
                p.name.toLowerCase().includes(searchTerm)
            );
            document.getElementById('productTable').innerHTML = filtered.map(/* 同renderProducts */).join('');
        });

        // 示例操作函数
        function editProduct(id) {
            const product = products.find(p => p.id === id);
            if(product) {
                showModal();
                // 填充表单数据...
            }
        }

        function deleteProduct(id) {
            products = products.filter(p => p.id !== id);
            renderProducts();
        }
    </script>
</body>
</html>